<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欢迎来到聊天室</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="application/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script type="application/javascript" src="/js/jquery.cookie.js"></script>
    <script type="application/javascript" src="/layui/layui.js"></script>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo"><a class="logo" href="#" style="color: #5fb878">admin</a></div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="">返回</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">设置</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">群聊设置</a></dd>
                        <dd><a href="">系统设置</a></dd>
                        <dd><a href="">个人信息设置</a></dd>
                    </dl>
                </li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <li class="layui-nav-item"><a href="#user">用户管理</a></li>
                    <li class="layui-nav-item"><a href="#log">日志</a></li>
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div class="layui-row layui-col-space15">
                
                <p style="margin: 10px;font-size: 20px;font-weight: bold;">用户信息</p>
                <table id="user" class="layui-table"
                    lay-data="{ height:330, url: '/js/data.json', page:true, escape: true, id:'idTest'}"
                    lay-filter="demo">
                    <thead>
                        <tr>
                            <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                            <th lay-data="{field:'user_id', sort: true, fixed: true}">ID</th>
                            <th lay-data="{field:'user_account'}">账号</th>
                            <th lay-data="{field:'user_password', sort: true}">密码</th>
                            <th lay-data="{field:'user_name'}">名字</th>
                            <th lay-data="{field:'user_sex'}">性别</th>
                            <th lay-data="{field:'user_age', sort: true}">年龄</th>

                            <th lay-data="{field:'user_phone', }">手机</th>
                            <th lay-data="{field:'user_address', width:135, sort: true}">地址</th>
                            <th lay-data="{field:'user_mail',  sort: true, fixed: 'right'}">邮箱</th>
                            <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}"></th>
                        </tr>
                    </thead>
                </table>
                <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            </div>

            <div style="height: 50px;"></div>
    
            <p style="margin: 10px;font-size: 20px;font-weight: bold;">用户日志</p>
            <div>
                <table id="log" class="layui-table"
                    lay-data="{ height:330, url: '/js/log.json', page:true, escape: true, id:'log'}"
                    lay-filter="log">
                    <thead>
                        <tr>
                            <th lay-data="{field:'user_id', sort: true, fixed: true}">ID</th>
                            <th lay-data="{field:'user_account'}">账号</th>
                            <th lay-data="{field:'user_name'}">名字</th>
                            <th lay-data="{field:'user_log', fixed: 'right'}">日志内容</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <script>
        //点击是想功能
        $(".logo").click(function () {
            //判断登录情况
            if ($.cookie('admin_uuid') == null) {//如果没登录过
                $("#mainContext").attr("src", "hello.html")//选择注册方式
            } else if ($.cookie('admin_uuid') != null) {//用户登陆过
                $("#mainContext").attr("src", "admin.html")
            }
        });
        layui.use(['table', 'util'], function () {
            var table = layui.table
                , util = layui.util;
            //监听表格复选框选择
            table.on('checkbox(demo)', function (obj) {
                console.log(obj)
            });
            //监听工具条
            table.on('tool(demo)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                }
            });
            //监听单元格编辑
            table.on('edit(demo)', function (obj) {
                layer.confirm('真的要修改吗？', function (index) {
                    var value = obj.value //得到修改后的值
                        , data = obj.data //得到所在行所有键值
                        , field = obj.field; //得到字段
                    layer.close(index);
                    layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改值为：' + util.escape(value));
                });
            });
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
</body>

</html>